<template>
  <div class="home-container">
    <a-row :gutter="16">
      <template-list
        :cardList="cardList"
        :cardListLoading="false"
      ></template-list>
    </a-row>
    <a-row type="flex" justify="center" style="margin-top:50px">
      <a-button ref="loadMore" type="primary" size="large" @click="loadMorePage" v-if="!isLastPage" :loading="isfetchTemplates">加载更多</a-button>
    </a-row>
    {{pageIndex}}
  </div>
</template>

<script lang="ts" setup>
import TemplateList from "@/components/TemplateList.vue";
import { computed, nextTick, onMounted, ref } from "vue";
import { useStore } from "vuex";
import { GlobalDataProps } from "@/store/index";
import { TemplateProps } from "@/store/template";
import  useLoadMore  from "@/hooks/useLoadMore";
import {
  Button as aButton,
  Row as aRow,
} from  "ant-design-vue";

const store = useStore<GlobalDataProps>();
const total = computed(()=> store.state.templates.totalTemplates);
const {pageIndex, loadMorePage, isLastPage}  = useLoadMore('fetchTemplates', total, {pageIndex: 0 , pageSize: 8})
const loadMore = ref<HTMLElement | null>(null);
const isfetchTemplates = computed(() => {
  return store.getters.isOpLoading("fetchTemplates");
});
const cardList = computed<TemplateProps[]>(() => {
  // console.log(store);
  return store.state.templates.data;
});

onMounted(() => {
  // 第一次的加载就不需要, 因为一开始按钮就是显示出来的,会自动加载
  //使用观察者API,当 loadMore按钮 元素进入可视区域时，触发loadMorePage方法
  nextTick(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        loadMorePage();
      }
    },
      {
        root: null, // 默认为视口
        rootMargin: "0px", // 调整触发的边距
        threshold: 1.0, // 目标元素完全进入视口时才触发
      });
    if (loadMore.value) {
      // 这里要获取真实的dom元素
      observer.observe(loadMore.value?.$el);
    }
  });

});


function handleClick() {
  store.dispatch("fetchTemplates");
}

// const cardList = ref([
//   {
//     id: 1,
//     title: "Vue3",
//     desc: "Vue3",
//     coverImg:
//       "https://static.imooc-lego.com/upload-files/screenshot-889755.png",
//     user: {
//       gender: "",
//       nickName: "",
//       picture: "",
//       userName: "",
//     },
//   },
//   {
//     id: 2,
//     title: "Vue3",
//     desc: "Vue3",
//     coverImg: "http://static-dev.imooc-lego.com/imooc-test/sZHlgv.png",
//     user: {
//       gender: "",
//       nickName: "",
//       picture: "",
//       userName: "",
//     },
//   },
//   {
//     id: 3,
//     title: "Vue3",
//     desc: "Vue3",
//     coverImg:
//       "https://static.imooc-lego.com/upload-files/screenshot-323204.png",
//     user: {
//       gender: "",
//       nickName: "",
//       picture: "",
//       userName: "",
//     },
//   },
//   {
//     id: 4,
//     title: "Vue3",
//     desc: "Vue3",
//     coverImg:
//       "https://static.imooc-lego.com/upload-files/screenshot-677311.png",
//     user: {
//       gender: "",
//       nickName: "",
//       picture: "",
//       userName: "",
//     },
//   },
//   {
//     id: 5,
//     title: "Vue3",
//     desc: "Vue3",
//     coverImg:
//       "https://static.imooc-lego.com/upload-files/screenshot-726751.png",
//     user: {
//       gender: "",
//       nickName: "",
//       picture: "",
//       userName: "",
//     },
//   },
//   {
//     id: 6,
//     title: "Vue3",
//     desc: "Vue3",
//     coverImg:
//       "https://static.imooc-lego.com/upload-files/screenshot-682056.png",
//     user: {
//       gender: "",
//       nickName: "",
//       picture: "",
//       userName: "",
//     },
//   },
//   {
//     id: 7,
//     title: "Vue3",
//     desc: "Vue3",
//     coverImg:
//       "https://static.imooc-lego.com/upload-files/screenshot-133701.png",
//     user: {
//       gender: "",
//       nickName: "",
//       picture: "",
//       userName: "",
//     },
//   },
// ]);

// const router = useRouter();
// router.push({ name: 'template', params: { templateId: 1 }});
</script>

<style scoped lang="css">
.home-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  width: 100%;
  min-height: 1000px;
}
</style>
